<template>
  <div >
    <el-card v-if="Allcomments" style="margin: 0 auto" id="background">
    <div v-for="(item,index) in Allcomments.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index" style="opacity: 1">
      <div class="message" >
        <div style="display: flex">
          <div><img class="img1" :src=item.avatar></div>
          <div style="padding-left: 20px;">
            发表评论
            <div style="margin-top: 10px"><router-link class="article-link" :to="{path:'/postDetail',query:{id: item.post_id}}"><a style="font-size: 18px"><!--{{item.comments_content}}-->  <div v-html="item.comments_content"></div></a></router-link></div>
            <div style="margin-top: 10px">{{item.create_time}}  <a class="hover" @click="deletecomment(item.id)"><i class="el-icon-delete" style="margin-left: 20px;cursor: pointer"></i><a class="hover" style="cursor: pointer;">删除</a></a></div>
          </div>
        </div>
    </div>
    </div>

    <el-pagination align='center'
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[1,3,5,10,20]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="Allcomments.length">
    </el-pagination>
    </el-card>

    <el-empty :image-size="300" v-else style="height: 100%;margin: 0 auto"></el-empty>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'PostManager',
  data(){
    return{
      Posts:[],
      currentPage:1,
      totalCount:0,
      pageSize:10,
      user_id:'',
      Allcomments:'',
      comment_id:''
    }
  },
  methods:{
    Nindex(index) {
      const page = this.currentPage // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index  +1+ (page - 1) * pagesize
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    selectPostsByAuthor(){
      this.$http.post('http://localhost:8888/Post/findPostByAuthorL',
        {"author_id": this.author_id},
        {emulateJSON: true}
      ).then(function (res) {
          if (res.data.code == 200) {
            this.Posts = res.data.data;
            console.log(this.Posts.create_time)
          } else {
          }
        }
      )
    },
    deletecomment(a){
      this.$confirm('是否确认删除该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.comment_id =a;
        this.$http.post('http://localhost:8888/Comments/deleteComments',
          {"id":this.comment_id},
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
          }
        })
        this.$router.go(0);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    findAllComments(){
      this.user_id=JSON.parse(localStorage.getItem("users")).id,
        this.$http.post('http://localhost:8888/Comments/findmycomments/'+this.user_id,
          {emulateJSON: true},
        ).then(function (res) {
          if (res.data.code == 200) {
            this.Allcomments= res.data.data;
          } else {
          }
        })
    },
  },
  created() {
    this.findAllComments();
  }
}


</script>

<style scoped>
.message{
  width: 100%;
  height: 100%;
  min-height: 80px;
  border-bottom: 1px solid #6e91e3;
  margin-top: 10px;
  padding: 10px 0 10px 0;
}

.img{
  width: 150px;
  height: 100px;
}

.textOVerThree {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap:break-word;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  width: 75vw;
}


.img1{
  width:60px;
  height: 60px;
  border-radius: 50%;
}

#background{
  width: 100%;
  height: 100%;
  background: url(../assets/img/bk5.jpg) no-repeat;
  background-size: 100%;


}

.hover:hover{
  color: #409EFF;
}


</style>
